<template>
  <div>
    <!--首页头部-->
    <nav-header></nav-header>

    <!--面包屑插槽-->
    <nav-bread>
      <span>Goods</span>
    </nav-bread>

    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price">Price
            <svg class="icon icon-arrow-short">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur': priceChecked=='All'}"
                     @click="setPriceFilter('All')">All</a></dd>
              <dd v-for="(item,i) in priceFilter" :key="i">
                <a href="javascript:void(0)" @click="setPriceFilter(i)" :class="{'cur':priceChecked===i}">{{
                  item.startPrice}} - {{ item.endPrice }}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">

              <ul>
                <!--商品列表-->
                <li v-for="item in goodsList" :key="item.productId">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{ item.productName }}</div>
                    <div class="price">￥{{ item.salePrice }}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click.prevent="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>

              <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30"
                   class="loading" v-show="load">
                加载中.....
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <!--没登录的模态框-->
    <Modal :mdShow="mdShow" @close="closeModal">
      <p slot="message">
        请先登录,否则无法加入到购物车中!
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShow=false">关闭</a>
      </div>
    </Modal>
    <!--加入购物的-->
    <modal :mdShow="mdShowCart" @close="closeModal">
      <p slot="message">
        <span>加入购物车成功!</span>
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
        <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>

    <!--遮挡层-->
    <div class="md-overlay" v-show="overLayFlag" @click.stop="closePop"></div>
    <!--首页底部-->
    <nav-footer></nav-footer>

  </div>
</template>

<script>
  import '../assets/css/base.css';
  import '../assets/css/product.css';
  import NavHeader from '../components/Header.vue';
  import NavFooter from '../components/Footer.vue';
  import NavBread from '../components/Bread.vue';
  import Modal from '../components/Modal.vue';
  import axios from 'axios';

  export default {
    data() {
      return {
        priceFilter: [          //价格列表
          {
            startPrice: '0.00',
            endPrice: '100.00'
          },
          {
            startPrice: '100.00',
            endPrice: '500.00'
          },
          {
            startPrice: '500.00',
            endPrice: '1000.00'
          },
          {
            startPrice: '1000.00',
            endPrice: '5000.00'
          }
        ],
        priceChecked: 'All',  //价格选中
        filterBy: false,      //价格列表显示
        overLayFlag: false,   //遮挡层
        goodsList: [],       //商品列表
        sortFlag: 1,         //价格排序
        page: 1,             //默认第几页
        pageSize: 4,         //默认一页显示几条
        busy: true,          //是否加载更多数据
        load: true,          //显示加载中的div
        mdShow : false,      //没登录的模态框
        mdShowCart : false,  //加入购物车的模态框
      }
    },
    mounted() {
      this.getGoodsList(false);
    },
    methods: {
      //商品列表
      getGoodsList(flag) {
        let param = {
          page: this.page,
          pageSize: this.pageSize,
          priceChecked: this.priceChecked,
        };
        axios.get('/goods/list', {params: param}).then(res => {
          let result = res.data;
          if (result.status === 0) {
            if (flag) {
              this.goodsList = this.goodsList.concat(result.data.list);
              //如果剩余的数据小于4条了，就不用继续加载
              if (result.data.count < 4) {
                this.busy = true;
                this.load = false;
              } else {
                this.busy = false;
                this.load = true;
              }
            } else {
              this.goodsList = result.data.list;
              this.busy = false;  //否则开启滚动加载
            }
          }
        });
      },
      //显示价格列表
      showFilterPop() {
        this.filterBy = true;
        this.overLayFlag = true;
      },
      //隐藏价格列表
      closePop() {
        this.filterBy = false;
        this.overLayFlag = false;
      },
      //每个商品价格区间
      setPriceFilter(index) {
        this.priceChecked = index;
        this.closePop();
        this.page = 1;
        this.getGoodsList();
      },
      //加载更多商品
      loadMore() {
        this.busy = true;
        setTimeout(() => {
          this.page++;
          this.getGoodsList(true);
        }, 500);
      },
      //添加到购物车
      addCart(proId) {
        axios.post('/goods/addCart', {productId: proId}).then((res) => {
          if (res.data.status == 0) {
            this.mdShowCart = true;
            this.$store.commit('updateCartCount',1);
          } else {
            this.mdShow = true;   //显示没登录的框
          }
        });
      },
      closeModal(){
        this.mdShow = false;
        this.mdShowCart = false;
      },
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Modal
    }
  }
</script>

<style scoped>
  .loading {
    text-align: center;
    padding: 0;
    background-color: #f5f7fc;
  }
  .btn--m:hover{
    background-color: #ffe5e6;
  }
</style>
